import React, { Component } from 'react';
import ReactDOM, { render } from 'react-dom';
import { Tree, Button, Icon, Dialog, Input, Grid, Message } from '@alifd/next';
import IceContainer from '@icedesign/container';
import PageHead from '../../../../components/PageADDTypeHead';
import './index.scss';
import service from '../../../../utils/service';
import api from '../../../../utils/api';

const { Row, Col } = Grid;

export default class AddType extends Component {
  static displayName = '添加商品类别';
  static propTypes = {};
  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      GoodsTypeList: [],
      id: '',
      pId: '',
      oldData: '',
      newData: '',
      addData: '',
      Evisible: false,
      Avisible: false,
      click: false,
    };
  }
  // 获取商品类别列表
getGoodsTypeList= () => {
  service({
    method: 'get',
    url: api.GoodsTypeList,
  })
    .then((res) => {
      // console.log(res);
      if (res.data.code === 200) {
        const data = res.data.class_list;
        data.forEach((item) => {
          if (item.children) {
            item.children.sort((item1, item2) => {
              return item1.label.localeCompare(item2.label, 'cn');
            });
          }
        });
        const List = [];
        const dataAll = {};
        dataAll.label = '商品类型';
        dataAll.value = 0;
        dataAll.children = data;
        List.push(dataAll);
        this.setState(
          {
            GoodsTypeList: List,
          }
        );
      }
    });
}
// 编辑
toEdit= () => {
  service({
    method: 'get',
    url: api.GoodsTypeChange,
    params: {
      act: 'edit',
      class_id: this.state.id,
      class_name: this.state.newData,
      parent_id: this.state.pId,
    },
  })
    .then((res) => {
      if (res.data.code === 200) {
        Message.success('修改成功！');
        this.setState(
          {
            Evisible: false,
            id: '',
            click: false,
          }, () => {
            this.getGoodsTypeList();
          }
        );
      }
    });
}
// 添加
toAdd= () => {
  service({
    method: 'get',
    url: api.GoodsTypeChange,
    params: {
      act: 'add',
      class_name: this.state.addData,
      parent_id: this.state.id,
    },
  })
    .then((res) => {
      if (res.data.code === 200) {
        Message.success('添加成功！');
        this.setState(
          {
            Avisible: false,
            id: '',
            click: false,
          }, () => {
            this.getGoodsTypeList();
          }
        );
      } else {
        Message.error('添加失败！');
      }
    });
}
// 删除
toDel= () => {
  service({
    method: 'get',
    url: api.GoodsTypeDelete,
    params: {
      class_id: this.state.id,
    },
  })
    .then((res) => {
      if (res.data.code === 200) {
        Message.success('删除成功！');
        this.setState(
          {
            id: '',
            click: false,
          }, () => {
            this.getGoodsTypeList();
          }
        );
      } else {
        Message.error('删除失败！');
      }
    });
}
handleSelect = (value, extra) => {
  this.setState(
    {
      id: extra.node.props.value,
      oldData: extra.node.props.label,
      pId: extra.node.props.parent_id,
      click: true,
    }
  );
};
componentDidMount() {
  this.getGoodsTypeList();
}
handleEditClick=() => {
  if (this.state.id) {
    this.setState(
      {
        Evisible: true,
      }
    );
  }
}
handleEditBtnClick=() => {
  this.toEdit();
}
handleAddClick=() => {
  if (this.state.click) {
    this.setState(
      {
        Avisible: true,
      }
    );
  }
}

handleDelClick=() => {
  Dialog.confirm({
    title: '提示',
    content: '确定删除此类别以及此类别包括的所有商品吗？',
    onOk: () => { this.toDel(); },
    onCancel: () => { this.onClose(); },
  });
}
handleAddBtnClick=() => {
  this.toAdd();
}
  onClose=() => {
    this.setState(
      {
        Evisible: false,
        Avisible: false,
      }
    );
  }
  render() {
    const { Evisible, Avisible } = this.state;
    return (
      <div style={styles.wrap}>
        <PageHead title="商品类别录入" onEditClick={this.handleEditClick} onAddClick={this.handleAddClick} onDelClick={this.handleDelClick} />
        <IceContainer style={styles.container}>
          <Tree dataSource={this.state.GoodsTypeList} showLine defaultExpandedKeys={['1']} onSelect={this.handleSelect} style={{ fontSize: '20px' }} />
        </IceContainer>
        {/* 编辑 */}
        <Dialog
          id="Dialog"
          visible={Evisible}
          footerActions={[]}
          style={{ marginTop: '25px' }}
          onClose={this.onClose}
          footerAlign="center"
          footer={<div><Button type="primary" onClick={this.handleEditBtnClick} className="dialogButton EditBtn SubBtn">确定</Button><Button type="primary" onClick={this.onClose} className="dialogButton OutBtn">取消</Button></div>}
        >
          <div>
            <h3 className="titleWrap"><span className="dialogTitle">填写编辑信息</span></h3>
            <IceContainer className="dialogContent" style={{ width: '600px', padding: '0 60px' }}>
              <Row gutter="30">
                <Col span="24" style={styles.col} className="forCenter">
                  <span style={styles.SelectLabel}>修改类别</span>
                  <Input size="large" style={styles.Select} defaultValue={this.state.oldData} placeholder="请填写商品类别" onChange={(value) => { this.setState({ newData: value }); }} />
                </Col>
              </Row>

            </IceContainer>
          </div>
        </Dialog>
        {/* 编辑 */}
        <Dialog
          id="Aialog"
          visible={Avisible}
          footerActions={[]}
          style={{ marginTop: '25px' }}
          onClose={this.onClose}
          footerAlign="center"
          footer={<div><Button type="primary" onClick={this.handleAddBtnClick} className="dialogButton EditBtn SubBtn">确定</Button><Button type="primary" onClick={this.onClose} className="dialogButton OutBtn">取消</Button></div>}
        >
          <div>
            <h3 className="titleWrap"><span className="dialogTitle">填写添加信息</span></h3>
            <IceContainer className="dialogContent" style={{ width: '600px', padding: '0 60px' }}>
              <Row gutter="30">
                <Col span="24" style={styles.col} className="forCenter">
                  <span style={styles.SelectLabel}>添加类别</span>
                  <Input size="large" style={styles.Select} placeholder="请填写商品类别" onChange={(value) => { this.setState({ addData: value }); }} />
                </Col>
              </Row>

            </IceContainer>
          </div>
        </Dialog>
      </div>
    );
  }
}

const styles = {
  wrap: {
    height: '100%',
  },
  container: {
    textAlign: 'left',
    color: '#333',
    padding: '20px',
    height: 'calc(100% - 38px)',
    marginBottom: '0',
    overflow: 'auto',
  },
  alignLeft: {
    float: 'left',
  },
  SelectLabel: {
    fontSize: '14px',
    lineHeight: '40px',
    float: 'left',
    margin: '0 10px 0 0',
    padding: '0',
    color: '#666',
    textAlign: 'right',
    minWidth: '60px',
  },
  Select: {
    float: 'left',
    width: 'calc(100% - 150px)',
    minWidth: '120px',
  },
};
